.page(data-page="data-table")
  .navbar
    .navbar-inner
      .left
        a(href="index.html").back.link.icon-only
          i.icon.icon-back
      .center Data Tables
      .right
        a(href="#").open-panel.link.icon-only
          i.icon.icon-bars
  .page-content
    .content-block-title Plain table
    .data-table
      table
        thead
          tr
            th.label-cell Desert (100g serving)
            th.numeric-cell Calories
            th.numeric-cell Fat (g)
            th.numeric-cell Carbs
            th.numeric-cell Protein (g)
        tbody
          tr
            td.label-cell Frozen yogurt
            td.numeric-cell 159
            td.numeric-cell 6.0
            td.numeric-cell 24
            td.numeric-cell 4.0
          tr
            td.label-cell Ice cream sandwich
            td.numeric-cell 237
            td.numeric-cell 9.0
            td.numeric-cell 37
            td.numeric-cell 4.4
          tr
            td.label-cell Eclair
            td.numeric-cell 262
            td.numeric-cell 16.0
            td.numeric-cell 24
            td.numeric-cell 6.0
          tr
            td.label-cell Cupcake
            td.numeric-cell 305
            td.numeric-cell 3.7
            td.numeric-cell 67
            td.numeric-cell 4.3
    .content-block-title Within card
    .card.data-table
      table
        thead
          tr
            th.label-cell Desert (100g serving)
            th.numeric-cell Calories
            th.numeric-cell Fat (g)
            th.numeric-cell Carbs
            th.numeric-cell Protein (g)
        tbody
          tr
            td.label-cell Frozen yogurt
            td.numeric-cell 159
            td.numeric-cell 6.0
            td.numeric-cell 24
            td.numeric-cell 4.0
          tr
            td.label-cell Ice cream sandwich
            td.numeric-cell 237
            td.numeric-cell 9.0
            td.numeric-cell 37
            td.numeric-cell 4.4
          tr
            td.label-cell Eclair
            td.numeric-cell 262
            td.numeric-cell 16.0
            td.numeric-cell 24
            td.numeric-cell 6.0
          tr
            td.label-cell Cupcake
            td.numeric-cell 305
            td.numeric-cell 3.7
            td.numeric-cell 67
            td.numeric-cell 4.3
    .content-block-title Selectable rows
    .data-table.data-table-init.card
      table
        thead
          tr
            th.checkbox-cell
              label.form-checkbox
                input(type="checkbox")
                i
            th.label-cell Desert (100g serving)
            th.numeric-cell Calories
            th.numeric-cell Fat (g)
            th.numeric-cell Carbs
            th.numeric-cell Protein (g)
        tbody
          tr
            td.checkbox-cell
              label.form-checkbox
                input(type="checkbox")
                i
            td.label-cell Frozen yogurt
            td.numeric-cell 159
            td.numeric-cell 6.0
            td.numeric-cell 24
            td.numeric-cell 4.0
          tr
            td.checkbox-cell
              label.form-checkbox
                input(type="checkbox")
                i
            td.label-cell Ice cream sandwich
            td.numeric-cell 237
            td.numeric-cell 9.0
            td.numeric-cell 37
            td.numeric-cell 4.4
          tr
            td.checkbox-cell
              label.form-checkbox
                input(type="checkbox")
                i
            td.label-cell Eclair
            td.numeric-cell 262
            td.numeric-cell 16.0
            td.numeric-cell 24
            td.numeric-cell 6.0
          tr
            td.checkbox-cell
              label.form-checkbox
                input(type="checkbox")
                i
            td.label-cell Cupcake
            td.numeric-cell 305
            td.numeric-cell 3.7
            td.numeric-cell 67
            td.numeric-cell 4.3
    .content-block-title Tablet-only columns
    .content-block
      p "Comments" column will be visible only on large screen devices (tablets)
    .data-table.data-table-init.card
      table
        thead
          tr
            th.checkbox-cell
              label.form-checkbox
                input(type="checkbox")
                i
            th.label-cell Desert (100g serving)
            th.numeric-cell Calories
            th.numeric-cell Fat (g)
            th.numeric-cell Carbs
            th.numeric-cell Protein (g)
            th.tablet-only <i class="material-icons">message</i> Comments
        tbody
          tr
            td.checkbox-cell
              label.form-checkbox
                input(type="checkbox")
                i
            td.label-cell Frozen yogurt
            td.numeric-cell 159
            td.numeric-cell 6.0
            td.numeric-cell 24
            td.numeric-cell 4.0
            td.tablet-only I like frozen yogurt
          tr
            td.checkbox-cell
              label.form-checkbox
                input(type="checkbox")
                i
            td.label-cell Ice cream sandwich
            td.numeric-cell 237
            td.numeric-cell 9.0
            td.numeric-cell 37
            td.numeric-cell 4.4
            td.tablet-only But like ice cream more
          tr
            td.checkbox-cell
              label.form-checkbox
                input(type="checkbox")
                i
            td.label-cell Eclair
            td.numeric-cell 262
            td.numeric-cell 16.0
            td.numeric-cell 24
            td.numeric-cell 6.0
            td.tablet-only Super tasty
          tr
            td.checkbox-cell
              label.form-checkbox
                input(type="checkbox")
                i
            td.label-cell Cupcake
            td.numeric-cell 305
            td.numeric-cell 3.7
            td.numeric-cell 67
            td.numeric-cell 4.3
            td.tablet-only Don't like it
    .content-block-title Within card with title and actions
    .data-table.data-table-init.card
      .card-header
        .data-table-title Nutrition
        .data-table-actions
          a.link.icon-only
            i.icon.material-icons sort
          a.link.icon-only
            i.icon.material-icons more_vert
      .card-content
        table
          thead
            tr
              th.checkbox-cell
                label.form-checkbox
                  input(type="checkbox")
                  i
              th.label-cell Desert (100g serving)
              th.numeric-cell Calories
              th.numeric-cell Fat (g)
              th.numeric-cell Carbs
              th.numeric-cell Protein (g)
              th.tablet-only <i class="material-icons">message</i> Comments
          tbody
            tr
              td.checkbox-cell
                label.form-checkbox
                  input(type="checkbox")
                  i
              td.label-cell Frozen yogurt
              td.numeric-cell 159
              td.numeric-cell 6.0
              td.numeric-cell 24
              td.numeric-cell 4.0
              td.tablet-only I like frozen yogurt
            tr
              td.checkbox-cell
                label.form-checkbox
                  input(type="checkbox")
                  i
              td.label-cell Ice cream sandwich
              td.numeric-cell 237
              td.numeric-cell 9.0
              td.numeric-cell 37
              td.numeric-cell 4.4
              td.tablet-only But like ice cream more
            tr
              td.checkbox-cell
                label.form-checkbox
                  input(type="checkbox")
                  i
              td.label-cell Eclair
              td.numeric-cell 262
              td.numeric-cell 16.0
              td.numeric-cell 24
              td.numeric-cell 6.0
              td.tablet-only Super tasty
            tr
              td.checkbox-cell
                label.form-checkbox
                  input(type="checkbox")
                  i
              td.label-cell Cupcake
              td.numeric-cell 305
              td.numeric-cell 3.7
              td.numeric-cell 67
              td.numeric-cell 4.3
              td.tablet-only Don't like it
    .content-block-title Sortable columns
    .data-table.data-table-init.card
      .card-header
        .data-table-title Nutrition
        .data-table-actions
          a.link.icon-only
            i.icon.material-icons sort
          a.link.icon-only
            i.icon.material-icons more_vert
      .card-content
        table
          thead
            tr
              th.checkbox-cell
                label.form-checkbox
                  input(type="checkbox")
                  i
              th.label-cell.sortable-cell.sortable-active Desert (100g serving)
              th.numeric-cell.sortable-cell Calories
              th.numeric-cell.sortable-cell Fat (g)
              th.numeric-cell.sortable-cell Carbs
              th.numeric-cell.sortable-cell Protein (g)
              th.tablet-only <i class="material-icons">message</i> Comments
          tbody
            tr
              td.checkbox-cell
                label.form-checkbox
                  input(type="checkbox")
                  i
              td.label-cell Frozen yogurt
              td.numeric-cell 159
              td.numeric-cell 6.0
              td.numeric-cell 24
              td.numeric-cell 4.0
              td.tablet-only I like frozen yogurt
            tr
              td.checkbox-cell
                label.form-checkbox
                  input(type="checkbox")
                  i
              td.label-cell Ice cream sandwich
              td.numeric-cell 237
              td.numeric-cell 9.0
              td.numeric-cell 37
              td.numeric-cell 4.4
              td.tablet-only But like ice cream more
            tr
              td.checkbox-cell
                label.form-checkbox
                  input(type="checkbox")
                  i
              td.label-cell Eclair
              td.numeric-cell 262
              td.numeric-cell 16.0
              td.numeric-cell 24
              td.numeric-cell 6.0
              td.tablet-only Super tasty
            tr
              td.checkbox-cell
                label.form-checkbox
                  input(type="checkbox")
                  i
              td.label-cell Cupcake
              td.numeric-cell 305
              td.numeric-cell 3.7
              td.numeric-cell 67
              td.numeric-cell 4.3
              td.tablet-only Don't like it
    .content-block-title With title and different actions on select
    .data-table.data-table-init.card
      .card-header
        .data-table-header
          .data-table-title Nutrition
          .data-table-actions
            a.link.icon-only
              i.icon.material-icons sort
            a.link.icon-only
              i.icon.material-icons more_vert
        .data-table-header-selected
          .data-table-title-selected <span class="data-table-selected-count"></span> items selected
          .data-table-actions
            a.link.icon-only
              i.icon.material-icons delete
            a.link.icon-only
              i.icon.material-icons more_vert
      .card-content
        table
          thead
            tr
              th.checkbox-cell
                label.form-checkbox
                  input(type="checkbox")
                  i
              th.label-cell Desert (100g serving)
              th.numeric-cell Calories
              th.numeric-cell Fat (g)
              th.numeric-cell Carbs
              th.numeric-cell Protein (g)
              th.tablet-only <i class="material-icons">message</i> Comments
          tbody
            tr
              td.checkbox-cell
                label.form-checkbox
                  input(type="checkbox")
                  i
              td.label-cell Frozen yogurt
              td.numeric-cell 159
              td.numeric-cell 6.0
              td.numeric-cell 24
              td.numeric-cell 4.0
              td.tablet-only I like frozen yogurt
            tr
              td.checkbox-cell
                label.form-checkbox
                  input(type="checkbox")
                  i
              td.label-cell Ice cream sandwich
              td.numeric-cell 237
              td.numeric-cell 9.0
              td.numeric-cell 37
              td.numeric-cell 4.4
              td.tablet-only But like ice cream more
            tr
              td.checkbox-cell
                label.form-checkbox
                  input(type="checkbox")
                  i
              td.label-cell Eclair
              td.numeric-cell 262
              td.numeric-cell 16.0
              td.numeric-cell 24
              td.numeric-cell 6.0
              td.tablet-only Super tasty
            tr
              td.checkbox-cell
                label.form-checkbox
                  input(type="checkbox")
                  i
              td.label-cell Cupcake
              td.numeric-cell 305
              td.numeric-cell 3.7
              td.numeric-cell 67
              td.numeric-cell 4.3
              td.tablet-only Don't like it
    .content-block-title Alternate header with actions
    .data-table.data-table-init.card
      .card-header
        .data-table-links
          a.link Add
          a.link Remove
        .data-table-actions
          a.link.icon-only
            i.icon.material-icons sort
          a.link.icon-only
            i.icon.material-icons more_vert
      .card-content
        table
          thead
            tr
              th.checkbox-cell
                label.form-checkbox
                  input(type="checkbox")
                  i
              th.label-cell Desert (100g serving)
              th.numeric-cell Calories
              th.numeric-cell Fat (g)
              th.numeric-cell Carbs
              th.numeric-cell Protein (g)
              th.tablet-only <i class="material-icons">message</i> Comments
              th
          tbody
            tr
              td.checkbox-cell
                label.form-checkbox
                  input(type="checkbox")
                  i
              td.label-cell Frozen yogurt
              td.numeric-cell 159
              td.numeric-cell 6.0
              td.numeric-cell 24
              td.numeric-cell 4.0
              td.tablet-only I like frozen yogurt
              td.actions-cell
                a.link.icon-only
                  i.icon.material-icons edit
                a.link.icon-only
                  i.icon.material-icons delete
            tr
              td.checkbox-cell
                label.form-checkbox
                  input(type="checkbox")
                  i
              td.label-cell Ice cream sandwich
              td.numeric-cell 237
              td.numeric-cell 9.0
              td.numeric-cell 37
              td.numeric-cell 4.4
              td.tablet-only But like ice cream more
              td.actions-cell
                a.link.icon-only
                  i.icon.material-icons edit
                a.link.icon-only
                  i.icon.material-icons delete
            tr
              td.checkbox-cell
                label.form-checkbox
                  input(type="checkbox")
                  i
              td.label-cell Eclair
              td.numeric-cell 262
              td.numeric-cell 16.0
              td.numeric-cell 24
              td.numeric-cell 6.0
              td.tablet-only Super tasty
              td.actions-cell
                a.link.icon-only
                  i.icon.material-icons edit
                a.link.icon-only
                  i.icon.material-icons delete
            tr
              td.checkbox-cell
                label.form-checkbox
                  input(type="checkbox")
                  i
              td.label-cell Cupcake
              td.numeric-cell 305
              td.numeric-cell 3.7
              td.numeric-cell 67
              td.numeric-cell 4.3
              td.tablet-only Don't like it
              td.actions-cell
                a.link.icon-only
                  i.icon.material-icons edit
                a.link.icon-only
                  i.icon.material-icons delete

    .content-block-title Collapsible
    .content-block
      p The following table will be collapsed to kind of List View on small screens:
    .card.data-table.data-table-collapsible.data-table-init
      .card-header
        .data-table-title Nutrition
        .data-table-actions
          a.link.icon-only
            i.icon.material-icons sort
          a.link.icon-only
            i.icon.material-icons more_vert
      .card-content
        table
          thead
            tr
              th.label-cell Desert (100g serving)
              th.numeric-cell Calories
              th.numeric-cell Fat (g)
              th.numeric-cell Carbs
              th.numeric-cell Protein (g)
          tbody
            tr
              td.label-cell Frozen yogurt
              td.numeric-cell 159
              td.numeric-cell 6.0
              td.numeric-cell 24
              td.numeric-cell 4.0
            tr
              td.label-cell Ice cream sandwich
              td.numeric-cell 237
              td.numeric-cell 9.0
              td.numeric-cell 37
              td.numeric-cell 4.4
            tr
              td.label-cell Eclair
              td.numeric-cell 262
              td.numeric-cell 16.0
              td.numeric-cell 24
              td.numeric-cell 6.0
            tr
              td.label-cell Cupcake
              td.numeric-cell 305
              td.numeric-cell 3.7
              td.numeric-cell 67
              td.numeric-cell 4.3
